<template>
    <div ref="userRateChart" style="height: 400px; width: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'userInfoEcharts',
    data() {
        return {
            myChart: null,
            channelData: null,
        }
    },
    methods: {
        renderData(ageRateData) {
            this.renderRealNameRateChart(ageRateData);
        },
        renderRealNameRateChart(data) {
            this.myChart = echarts.init(this.$refs.userRateChart); // 初始化ECharts实例
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['未认证', '已认证', '全部用户']
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: data.date,
                        axisLabel: {
                            rotate: 45
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '未认证',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: data.notAuthList
                    },
                    {
                        name: '已认证',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: data.authList
                    },
                    {
                        name: '全部用户',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: data.allAuthList
                    }
                ]
            };
            this.myChart.setOption(option);
        },
    }
}
</script>

<style lang="scss" scoped></style>
